<template>
    <v-app>
        <!-- <v-navigation-drawer app>
            <v-sheet color="grey lighten-4" class="pa-4">
                <v-row no-gutters>
                    <v-col md="5">
                        <v-avatar
                            class="mb-4"
                            color="warning lighten-2"
                            size="64"
                        >
                            <v-icon color="white" large>mdi-account</v-icon>
                        </v-avatar>
                    </v-col>
                    <v-col class="user-info">
                        <h3>李文</h3>
                        <p>
                            <a href="javascript:void(0)" @click="logout"
                                >退出登录</a
                            >
                        </p>
                    </v-col>
                </v-row>
            </v-sheet>
            <v-list dense>
                <v-list-item-group color="primary" v-model="selectedItem">
                    <v-list-item key="0">
                        <v-list-item-icon>
                            <v-icon>mdi-sitemap-outline</v-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title>族谱图生成</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
            <v-divider></v-divider>
        </v-navigation-drawer> -->
        <v-main>
            <family-diagram />
        </v-main>
    </v-app>
</template>

<script>
import FamilyDiagram from "./FamilyDiagram";

export default {
    name: "App",

    components: {
        FamilyDiagram,
    },

    data: () => ({
        selectedItem: 0,
    }),

    methods: {
        logout() {
            this.$router.replace("/");
        },
    },
};
</script>
<style scoped>
.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>